<template>
  <div class="app">
    <div class="box">
      <div class="box-1"></div>
    </div>
    <div class="box2"></div>
    <div class="box-1"></div>
  </div>
</template>
<script>
export default {
  name: 'App',
  data () {
    return {}
  }
}
</script>
<style lang="less">
// less scss:css的预处理语言,完美支持css
// less：安装包: less less-loader
//       npm i less less-loader -D -f
//       -D该插件打包后不使用 默认是使用
//    语法：
//       1：定义变量    @变量名:值;
//       2:嵌套使用
//       3:方法封装
//       4:继承使用
//       5:&使用   &代表父级

@width: 100px;
.setWh(@w,@h,@c) {
  width: @w;
  height: @h;
  background-color: @c;
}
.border {
  border: 18px solid red;
}
.box {
  // width: @width;
  // height: 50px;
  // background-color: #f00;
  .setWh(100px,50px,#f00);
  &-1 {
    // width: 20px;
    // height: 20px;
    // background-color: #0f0;
    .setWh(20px,20px,#0f0);
    .border;
  }
}
.box2 {
  // width: @width;
  // height: 150px;
  // background-color: #00f;
  .setWh(200px,150px,#00f);
  .border;
}
</style>
